<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        #main {
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));

    let option = {
        backgroundColor: "#23243a",
        legend: {
            value: ['能力分析'],
            icon: 'circle',
            right: '10',
            textStyle: {
                color: "rgba(250,250,250,0.6)",
                fontSize: 16
            }
        },
        radar: [{
            radius: '60%',
            name: {
                textStyle: {
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 16
                }
            },
            indicator: [
                <#list indicators as indicator>
                    {
                        name: '${indicator.name}',
                        min: ${indicator.min},
                        max: ${indicator.max}
                    },
                </#list>
            ],
            center: ['50%', '50%'], // 位置
            shape: 'circle', //形状
            splitArea: {
                areaStyle: {
                    color: 'transparent', //圆环颜色
                    shadowColor: 'aqua', // 圆颜色
                    shadowBlur: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#08585F' // 分割线
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#08585F', //圆线
                    width: 2
                }
            }
        }],
        series: [{
            type: 'radar',
            value: [{
                value: [
                    <#list datas as value>
                        ${value?c},
                    </#list>
                ],
                name: '能力分析',
                itemStyle: {
                    color: '#327BFA',
                    opacity: 0
                },
                lineStyle: {
                    width: 0,
                    type: 'dotted'
                },
                areaStyle: {
                    normal: {
                        color: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.5,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(50, 123, 250, 0.7)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(50, 123, 250, 0.3)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            },
                {
                    value: [
                        <#list datas as value>
                            ${value?c},
                        </#list>
                    ],
                }
            ]
        }]
    };
    myChart.setOption(option);
</script>
